<template>
  <div class="">
    <!-- 遍历路由表，生成左侧菜单 -->
    <template v-for="(item,index) in menus">
      <!-- 如果菜单是显式的 -->
      <template v-if="item.display">
        <!-- 一级菜单的情况（或是在递归下，指没有子菜单的情况-即最后一级菜单） -->
        <template v-if="item.children!=null&&item.children.length==0">
          <el-menu-item :index="item.route" :key="index+''+item.id.toString()" :disabled="item.enabled==false" v-show="item.display">
            <!-- 设置icon -->
            <template #title>
              <el-icon v-if="item.iconCls">
                <component
                  :is="item.iconCls"
                ></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
          </el-menu-item>
        </template>
        <!-- 一级菜单的情况 end-->
        <!-- 多级菜单的情况 -->
        <template v-else>
          <el-sub-menu :index="index+''+item.id.toString()" :key="index+''+item.id.toString()" :disabled="item.enabled==false" v-show="item.display">
            <template #title>
              <!-- 设置icon -->
              <el-icon v-if="item.iconCls">
                <component
                  :is="item.iconCls"
                ></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <!--如果还有子菜单，递归调用-->
            <AsideSubMeun :menus="item.children"></AsideSubMeun>
          </el-sub-menu>
        </template>
        <!-- 多级菜单 end-->
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults } from 'vue';

/* const props = defineProps({
  menus: {
    type: Array,
    default() {
      return new Array();
    },
  },
}); */

interface Props {
  menus: Record<string, any>[],
}
const props = withDefaults(defineProps<Props>(), {
  menus: () => new Array<Record<string, any>>(),
});
</script>

<style lang="scss" scoped>

</style>
